<template>
    <view class="page-user content" :style="{ direction: $store.state.dir }">
        <status-bar></status-bar>
        <view class="user-account flex-layout-col flex-center">
            <avatar-image></avatar-image>
            <view
                v-if="user"
                class="user-account-name"
                style="margin-top: 30rpx"
            >
                {{ user.name }}
            </view>
            <view
                v-else
                class="user-account-name login-tip"
                @click="handleLogin"
                >{{ $t("user.notlogged") }}</view
            >
        </view>
        <!-- 上面菜单 -->
        <view class="my-menu">
            <view
                class="menu-list-item"
                v-for="(item, index) in menuList"
                :key="index"
                @click="handleMenu(item)"
            >
                <image :src="item.src" mode="aspectFit"></image>
                <view class="name">{{ item.name }}</view>
                <view class="des" v-if="item.des">{{ item.des }}</view>
            </view>
        </view>
        <!-- 下面的菜单 -->
        <view class="my-menu" style="margin-top: 24rpx">
            <view
                class="menu-list-item"
                v-for="(item, index) in menuLis1"
                :key="index"
                @click="handleMenu(item)"
            >
                <image :src="item.src" mode="aspectFit"></image>
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
        <u-button
            type="error"
            @click="handleLogout"
            v-show="user"
            :text="$t('user.logout')"
            class="layOut"
        ></u-button>
        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog
                ref="inputClose"
                title="prompt"
                @confirm="dialogConfirm"
            >
                <view class="">
                    {{ $t("isPhone") }}
                </view>
            </uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { APP_ROLE, CurrentRole } from "../../config";
import { getUserInfo, myShopStatus } from "@/lib/service";
export default {
    data() {
        return {
            contracts: "",
            status: "-2",
            menuList: [
                // {
                //     name: "List you propertyt",
                //     src: "/static/my/propertyt.png",
                // },
                {
                    name: "My orders",
                    src: "/static/my/order.png",
                    url: "/pages/user/my-order/orders",
                },
                // {
                //     name: "House owner order",
                //     des: "(you arelandlord)",
                //     src: "/static/my/house.png",
                //     url: "/pages/user/store_orders",
                // },
                {
                    name: "My bank account",
                    src: "/static/my/bank.png",
                    url: "/pages/user/bank/bankAccount",
                },
                {
                    name: "My coupon",
                    src: "/static/my/coupon.png",
                    url: "./my_coupon",
                },
                {
                    name: "My bonus",
                    src: "/static/my/bonus.png",
                    url: "./my_bonus",
                },
                {
                    name: "Seller Center",
                    src: "/static/my/seller.png",
                },
            ],
            menuLis1: [
                {
                    name: "Personal Profile",
                    src: "/static/my/person.png",
                    url: "/pages/profile/profile",
                },
                {
                    name: "Download App",
                    src: "/static/my/download.png",
                    url: "/pages/download/download",
                    noLogin: true,
                },
                {
                    name: "About Us",
                    src: "/static/my/aboutUs.png",
                    url: "/pages/about/about",
                    noLogin: true,
                },
            ],
        };
    },

    computed: {
        ...mapGetters(["systemConfig"]),
        isCanSubmit() {
            return APP_ROLE.Agent == CurrentRole;
        },
        user() {
            return this.$store.state.user;
        },
    },
    onShow() {
        if (this.user) {
            this.handleShopStatus();
        }
    },
    methods: {
        handleShopStatus() {
            myShopStatus()
                .then((res) => {
                    if (res.statusCode == 0) {
                        this.status = res.data.status;
                    }
                })
                .catch((res) => {});
        },
        handleLogin() {
            uni.navigateTo({
                url: "/pages/login/login",
            });
        },
        handlePropertySubmit() {
            getUserInfo()
                .then((res) => {
                    if (res.data.phone) {
                        uni.navigateTo({
                            url: "/pages/submit/submit",
                        });
                    } else {
                        this.$refs.inputDialog.open();
                    }
                })
                .catch((res) => {});
        },
        dialogConfirm() {
            uni.navigateTo({
                url: "/pages/profile/profile",
            });
        },
        handleLogout() {
            this.$store.dispatch("removeUser");
        },
        handleMenu(item) {
            if (!item.noLogin && !this.user) {
                return this.handleLogin();
            }
            // 如果是商户
            if (item.name == "Seller Center") {
                if (this.status == "-2") {
                    item.url = "./seller";
                } else if (this.status == "1") {
                    item.url = "./merchant/index";
                } else {
                    item.url = "./seller_review?status=" + this.status;
                }
            }
            // 如果是房东
            if (item.name == "List you propertyt") {
                return this.handlePropertySubmit();
            }
            uni.navigateTo({
                url: item.url,
            });
        },
    },
};
</script>

<style lang="scss">
.page-user {
    box-sizing: border-box;
    padding: 28rpx;

    .page-title {
        font-size: 48rpx;
        margin: 20px 0;
    }

    .user {
        display: flex;
        align-items: center;
    }

    .user-account {
        margin-top: 20px;
        padding: 20px 0;

        &-name {
            font-size: 32rpx;
            margin-top: 32px;
            font-weight: 500;
        }

        .login-tip {
            color: #1c120d;
        }

        &-mail {
            font-size: 14px;
        }
    }

    .mui-button-noborder {
        border: none !important;
    }

    .my-menu {
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        // align-items: center;
        padding: 36rpx 26rpx 4rpx;
        .menu-list-item {
            width: 33.33%;
            text-align: center;
            margin-bottom: 32rpx;
            image {
                width: 78rpx;
                height: 78rpx;
                background: #fff2e7;
                border-radius: 16rpx 16rpx 16rpx 16rpx;
                padding: 16rpx;
            }
            .name {
                font-size: 24rpx;
                color: #333333;
                margin-top: 10rpx;
            }
            .des {
                color: #717171;
                font-size: 20rpx;
            }
        }
    }
    .layOut {
        height: 92rpx;
        background: rgba(252, 114, 26, 0.8);
        border-radius: 198rpx 198rpx 198rpx 198rpx;
        font-size: 32rpx;
        margin-top: 58rpx;
    }
}
</style>
